<template>
    <div class="register">
        <nut-navbar :rightShow="false">
            {{navbar}}
            <a slot="back-icon" @click="back()">＜返回登录</a>
        </nut-navbar>
        <nut-avatar class="hd"></nut-avatar>
        <nut-textinput
                v-model="nikename"
                placeholder="设置昵称"
                :clearBtn="true"
                :disabled="false"
                @blur="checkUser()"
        />
        <nut-textinput
                placeholder="设置密码"
                v-model="password"
                type="password"
                @blur="validatePass()"
        />
        <nut-textinput
                placeholder="确认密码"
                v-model="passagain"
                type="password"
                @blur="validatePassagain()"
        />
        <nut-textinput
                v-model="phone"
                placeholder="手机号码"
                :clearBtn="true"
                :disabled="false"
                @blur="validatePhone()"
        />
        <div class="sexradio">
            <nut-radio v-model="sex" :label="0">男</nut-radio>
            <nut-radio v-model="sex" :label="1">女</nut-radio>
        </div>
        <nut-button block shape="circle" @click="doRegister">注册</nut-button>
    </div>
</template>

<script>
    import axios from "../../node_modules/axios"
    export default {
        name: "Register",
        data(){
            return{
                navbar:'',
                nikename:'',
                password:'',
                passagain:'',
                sex:0,
                phone:''
            }
        },
        methods:{
            /*注册*/
            doRegister() {
                var params = new URLSearchParams();//创建参数集合
                params.append('avatar','http://iconfont.alicdn.com/t/1586758922212.jpg@200h_200w.jpg');
                params.append('nikename', this.nikename);
                params.append('password', this.password);
                params.append('sex', this.sex);
                params.append('phone',this.phone);
                if (this.username == '' || this.password == '') {
                    this.$notify.danger('昵称或密码不能为空');
                } else {
                    this.$axios.post('/user/register', params).then(
                        res => {

                            if (res.data.code == 200) {
                                this.$cookies.set('token', res.data.data.token);
                                this.$cookies.set('userid', res.data.data.id);
                                this.$cookies.set('nikeName', res.data.data.nikename);
                                this.$cookies.set('sex', res.data.data.sex);
                                this.$cookies.set('phone', res.data.data.phone);
                                this.$cookies.set('username', res.data.data.username);
                                this.$cookies.set('avatar',res.data.data.avatar);
                                this.$notify.primary('注册成功');
                                this.$router.push({name:'Login'})
                            } else {
                                this.$notify.danger('出错啦！');
                                this.username = '';
                                this.password = '';
                            }
                        }
                    )
                }
            },
            /*校验昵称是否重复*/
            checkUser(){
                var param = new URLSearchParams();
                param.append('Nikename',this.nikename);
                this.$axios.post('/user/selectByNikename',param).then(
                    res => {

                        if(res.data){
                            this.$notify.danger('该昵称已被占用');
                            this.nikename = "";
                        }
                    }
                )
            },
            // 校验密码格式
            validatePass() {
                var pass = /^\w{6,16}$/;
                if (!pass.test(this.password)) {
                    this.$notify.danger('密码为6-16位字符');
                    this.password = '';
                }
            },
            /*校验确认密码是否一致*/
            validatePassagain(){
                if (this.passagain != this.password){
                    this.$notify.danger('密码不一致');
                    this.passagain="";
                }
            },
            validatePhone(){
                var tele = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
                if(!tele.test(this.phone)){
                    this.$notify.danger('请输入合法手机号');
                    this.phone = '';
                }
            },
            // 顶部返回
            back(){
                this.$router.push({name:'Login'})
            }
        }
    }
</script>

<style scoped>
    .register{
        width: 90%;
        margin: 10px auto;
    }
    >>>.nut-navbar{
        background: transparent;
        padding: 0px;
    }
    >>>.hd{
        display: block;
        width: 100px;
        height: 100px;
        margin: 10px auto;
    }
    >>>.sexradio{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        margin: 10px 0px 20px 0px;
    }
    >>>.nut-textinput input{
        box-shadow: 0px 0px 0px rgba(162,162,162,1);
        border-radius: 25px;
        background: #ffffff;
        margin: 10px 0px 10px 0px;
        padding: 10px 20px;
    }
</style>
